<template>
  <div v-if="flag" class="loading">
      <div >
          <img src="http://h5.chelun.com/2017/official/img/loading.gif" alt="">
          <p>加载中~</p>
      </div>
      
  </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false
        }
    },
    methods: {
        showFlag() {
            this.flag = true
        },
        hideFlag() {
            this.flag = false
        }
    }
}
</script>

<style lang="scss">
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  &>div{
    position: relative;
    top: 50%;
    left: 265px;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    width: 220px;
    height: 220px;
    background: #000;
    border-radius: 20px;
    text-align: center;
  }
  img{
    width: 100px;
    margin-top: 34px;
  }
  p{
    font-size: 30px;
    color: silver;
    margin-top: 30px;
  }
}
</style>